這邊只是用最低限度的css，以完成功能為主，將所有需要預先製作的UI Kits，其中包含icon，還有大部分Components做好。這邊先列出需要做的components，然後就繼續做事吧

目錄

• icons
• navBar
• footer

icons

用的是fontawsome的icon，但由於數量真的不多，不想下載一大包，所以我將需要用到的svg下載下來，接著使用nuxt-svgo的方式來使用這些icon。
官網也說明的很清楚，照做就對了，先安裝。

npx nuxi@latest module add nuxt-svgo

由於是NUXT專案，文件有提到，只要放在assets/icons/底下的svg，都可以在.vue裡面當component的方式直接使用。只是要加上前綴svgo，像是：

// 使用 assets/icons/user-solid.svg
<svgo-user-solid />

navBar

上面icon處理好了，navbar就方便了，真要說，需要處理的只有menu，需要拉資料下來，其他就是連結，或是後續會處理的：

• Logo -> link to index
• category: menu
• member -> link to member
• shopping cart -> blank
• language -> i18n

要拉category資料下來，所以先把store寫好：

// ./stores/useCategory.ts
import { defineStore } from 'pinia';
import useAPI from '~/composables/useApi';

const storeName = 'category';
export const useCategory = defineStore(storeName, () => {
    const { 
        callAPI, 
        fetchData: categoryList,
        isLoading: categoryIsLoading
    } = useAPI();

    const categoryCallApi = async () =>  {
        return callAPI(`/api/products/categories`);
    }
    return {
        categoryCallApi,
        categoryList,
        categoryIsLoading
    }
});

接著，就把NavBar完成：

// ./components/NavBar.vue
<script setup lang="ts">
const { locale, locales, setLocale, availableLocales } = useI18n();

const categoryStore = useCategory();
const {
  categoryCallApi
} = categoryStore;

const {
  categoryList
} = storeToRefs(categoryStore);

// i18n
const selectedLang = ref(locale.value)
const switchLan = (event: Event) => {
  console.log('selectedLang',selectedLang.value)
  if(event.target) {
    const newLanguage = event.target.value;
    locale.value = newLanguage;
  }
};

// category
const isOpen: Ref<boolean> = ref(false);
const switchCate = () => {
  isOpen.value = !isOpen.value;
}

onBeforeMount(async () => {
  await categoryCallApi();
})
</script>

<template>
  <div class="navbar">
    <nuxt-link to="/">E.Com</nuxt-link>
    <div class="category">
      <label @click="switchCate"><svgo-list-solid /></label>
      <ul :class="isOpen?'':'none'">
        <li v-for="item in categoryList" :key="item.slug">
          {{ item.name}}
        </li>
      </ul>

    </div>
    <nuxt-link to="/member"><svgo-user-solid /></nuxt-link>
    <div>
      <label><svgo-cart-shopping-solid /></label>
    </div>
    <div>
      <svgo-language-solid />
      <select v-model="selectedLang" @change="switchLan($event)">
        <option v-for="lc in availableLocales" :value="lc">{{ lc }}</option>
      </select>
    </div>
  </div>
</template>

<style scoped>
.navbar {
  border: 1px solid black;
  display: flex;
}

.category {
  cursor: pointer;
}

.none {
  display: none;
}
</style>

完成長這樣，鄉親啊～我知道很醜，但咱們先求功能再求美觀好不？

footer

footer的部分還不想理他，他就是靜態component，不會串其他API（目前是這樣想啦....）

閒聊碎碎念

呼～不知不覺已經來到鐵人賽的一半了，距離回台灣的日子也是一天天在接近，滿期待的～同時也有點感傷要離開溫哥華，人生有多少機會有辦法在外國異鄉這樣長時間待著，雖然我不是玩瘋的那種，該玩的部份玩過一輪後，生活型態依舊回歸每天在過日子；不過跳脫原本的舒適圈體驗不同的生活氛圍還有人際，是我此生很不一樣的體驗。就～把握每一天吧～